<template>
  <div class="home">
    <div class="userTile">
      <userTitle></userTitle>
    </div>
    <div class="homeBox">
      <div class="navBarBox">
        <navBar></navBar>
      </div>
      <div class="contBox">
        <el-scrollbar wrap-class="scrollbar-wrapper" style="height:100%;">
          <router-view class="routerCont"></router-view>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import NavBar from '@base/navBar'
import UserTitle from '@base/userTitle'
export default {
  name: 'home',
  components: {
    NavBar,
    UserTitle
  },
  data () {
    return {
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.home
  width 100%
  height 100%
  display flex
  flex 1
  flex-direction column
  .userTile
    height 60px
  .homeBox
    height calc(100% - 60px)
    display flex
    .navBarBox
      width 220px
    .contBox
      width calc(100% - 220px)
      overflow auto
      .routerCont
        padding 40px 30px
</style>
